<template>
	<view>
		<view>
			<!-- 我的意见反馈展示 -->
			<view v-for="(item,index) in data" :key="index">
				<uni-card style="height: auto;">
					<view style="display: flex;">
						<view>
							<view><text style="color: #f37b1d;" class="Text">用户：{{item.phone}}</text></view>
							<view><text style="color: #8dc63f;" class="Text">反馈内容：{{item.content}}</text></view>
							<view><text style="color: #1cbbb4;" class="Text">管理员回复：{{item.reply}}</text></view>
						</view>
					</view>
				</uni-card>
			</view>
			<view>
				<uni-fab :pattern="pattern" :content="content" horizontal="right" vertical="bottom"
					direction="horizontal" @trigger="submit" @fabClick="fabClick"></uni-fab>
			</view>
			<view v-if="flag">
				<view style="margin-top: 40px;margin-bottom: 10px;margin-left: 140px">
					<image style="width: 110px; height: 110px;" src="@/static/icons/nodata.png"></image>
				</view>
				<view><text style="color: #A9A9A9; font-size: 14px; margin-left: 120px;">技术咨询：18214376259</text></view>
			</view>
		</view>
		<view>
			<uni-popup background-color="white" ref="popup" type="dialog">
				<uni-popup-dialog title="意见反馈" mode="input" :before-close="true" @close="close" @confirm="confirm">
					<view style="margin-top: 10px; margin-left: 10px;">
						<uni-forms ref="valiForm" :border="true" :rules="rules" :modelValue="feedBackData">
							<uni-forms-item label="用户" name="phone">
								<uni-easyinput trim="all" :inputBorder="false" type="text"
									v-model="feedBackData.phone" />
							</uni-forms-item>
							<uni-forms-item label="内容" name="content">
								<uni-easyinput trim="all" :inputBorder="false" type="textarea"
									v-model="feedBackData.content" />
							</uni-forms-item>
						</uni-forms>
					</view>
				</uni-popup-dialog>
			</uni-popup>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		list,
		save
	} from '@/api/feedBack.js';
	import {share} from '@/utils/share.js';

	onLoad(async () => {
		share();
		await getFeedBacks();
	});

	const flag = ref(false);
	const data = ref([]);

	function getFeedBacks() {
		list().then(res => {
			if (res.code === 200) {
				data.value = res.data;
				if (data.value.length === 0) {
					flag.value = true;
				}
			}
		});
	};

	const feedBackData = ref({
		phone: '',
		content: ''
	});

	//点击提交按钮展示
	function fabClick() {
		uni.showToast({
			title: '即将前往提交!',
			icon: 'none'
		})
	}
	//提交按钮配置项
	const pattern = ref({
		selectedColor: '#2979ff',
		buttonColor: '#2979ff',
		icon: 'plusempty'
	});
	const content = ref([{
		iconPath: '/static/icons/submit.png',
		selectedIconPath: '/static/icons/submit_light.png',
		text: '反馈'
	}]);
	const active = ref(false);
	const popup = ref(null);

	function submit(e) {
		content.value[e.index].active = !e.item.active;
		popup.value.open('center');
		const userInfo = uni.getStorageSync('user');
		feedBackData.value.phone = userInfo.phone;
	};

	function close() {
		popup.value.close();
		feedBackData.value.content = '';
	};

	//Form表单校验
	const valiForm = ref(null);
	const rules = ref({
		phone: {
			rules: [{
				required: true,
				errorMessage: '用户手机号不能为空'
			}]
		},
		content: {
			rules: [{
				required: true,
				errorMessage: '评价内容不能为空'
			}]
		}
	});

	//反馈内容确认提交
	function confirm() {
		valiForm.value.validate((valid) => {
			if (!valid) {
				save(feedBackData.value).then(res => {
					if (res.code === 200) {
						uni.showModal({
							content: '反馈成功,待审核！',
							success: function(res) {
								if (res.confirm) {
									feedBackData.value.content = '';
									uni.switchTab({
										url: '/pages/my/my'
									})
									popup.value.close();
								} else if (res.cancel) {
									uni.switchTab({
										url: '/pages/my/my'
									})
									popup.value.close();
								}
							}
						});
					}
				});
			}
		});
	};
</script>

<style scoped lang="scss">
	.global {
		background-color: #F5F5F5;
		height: auto;
	}
</style>